<template>
  <div>

    <Row justify="end" >
      <i-col flex="auto" style="margin-bottom: 0.5rem;">

        <div class="y_query_right">
          <Input v-model.trim="tParams.orderSerialNumber" placeholder="订单流水号" clearable class="y_condition"></Input>
          <Input v-model.trim="tParams.userName" placeholder="请输入用户名" clearable class="y_condition"></Input>
          <DatePicker type="datetime" v-model="tParams.startTime" format="yyyy-MM-dd HH:mm" class="y_condition" placeholder="选择起始时间"></DatePicker>-&nbsp;&nbsp;&nbsp;
          <DatePicker type="datetime" v-model="tParams.endTime" format="yyyy-MM-dd HH:mm" class="y_condition" placeholder="选择结束时间"></DatePicker>
          <Button type="primary"  class="y_condition" icon="ios-search" @click="search">查询</Button>
          <Button type="primary" icon="ios-contact-outline" class="y_condition" @click="showConfirmPay(-1)" :disabled="messageSelected.length==0">批量审核</Button>
        </div>
      </i-col>
    </Row>

    <List  border header="该页面仅展示已经支付,但尚未确认款项和安全等级的订单.">
      <ListItem style="display: flex;flex-direction: column;align-items: flex-start;margin-left: 0.5rem;">
        <Checkbox v-model="isCheckedAllMessage" @on-change="handleCheckAll" >全选</Checkbox>
      </ListItem>
      <CheckboxGroup v-model="messageSelected" @on-change="checkChange">
      <ListItem v-for="(item,index) in tData.orderList" :key="item.id"  :style="{background: item.checkState===2?'#ffebee':'white'}">
        <div style="width: 100%">
          <Row type="flex"  justify="start">
            <i-col span="1">
              <Checkbox :label="index" :value="index">{{ check }}</Checkbox>
            </i-col>

            <Tag color="magenta" v-if="item.firstOrder ===1">首单</Tag>
            <Tag color="blue" v-if="item.firstOrder===2">复购</Tag>
            <Tag color="default" v-if="item.firstOrder===3">普通</Tag>
            <Tooltip :content="item.serialNumber">
              <span class="base_key">订单短号: <span class="base_value">{{ showShortNo(item.serialNumber) }}</span></span>
            </Tooltip>
            <span class="base_key">付款时间: <span class="base_value">{{$tiyBJTime(item.checkoutTime)}}</span></span>
            <span class="base_key">国家: <span class="base_value">{{item.countryName}}</span></span>
            <span class="base_key" >金额: <span class="base_value">US${{item.actualPayment}}</span></span>
            <span class="base_key">下单设备: <span class="base_value">{{showDeviceType(item.deviceType)}}</span></span>
            <span class="base_key">注册方式: <span class="base_value">邮箱注册</span></span>
            <span class="base_key">用户标签: <Tag v-if="item.userTabs!=null" color="blue">{{item.userTabs}}</Tag>
              <span v-else class="base_value">无</span>
            </span>


          </Row>

          <Row justify="space-between" style="padding-top: 0.5rem">
            <i-col flex="1" style="text-align: left">
              <span class="base_key">用户备注: <span v-if="item.note!=''&&item.note!=null" class="base_value">{{ item.note }}</span>
                   <span v-else class="base_value">无</span>
              </span>
            </i-col>
          </Row>

          <Row justify="space-between" style="padding-top: 0.5rem">
            <i-col flex="1" style="text-align: left">
              <span class="base_key">订单检查:
                <span v-if="item.checkState===1" style="color:green;" class="base_value">正常</span>
                <span v-if="item.checkState===2" style="color:red;" class="base_value">异常</span>
                <span v-if="item.checkState===3" class="base_value">待检查</span>
              </span>
              <KeyValueView v-if="item.checkUserName!=='[]'" title="用户名重复" :value="item.checkUserName"></KeyValueView>
              <KeyValueView v-if="item.userPhone!=='[]'" title="电话重复" :value="item.userPhone"></KeyValueView>
              <KeyValueView v-if="item.userEmail!=='[]'" title="注册邮箱重复" :value="item.userEmail"></KeyValueView>
              <KeyValueView v-if="item.receiveName!=='[]'" title="收件人姓名重复" :value="item.receiveName"></KeyValueView>
              <KeyValueView v-if="item.receivePhone!=='[]'" title="收件人电话重复" :value="item.receivePhone"></KeyValueView>
              <KeyValueView v-if="item.receiveAddress!=='[]'" title="收件地址重复" :value="item.receiveAddress"></KeyValueView>
            </i-col>
            <i-col  >
              <Button size="small" @click="makeCheckData(item.userId,item.id)" type="primary" ghost style="margin-left: 0.5rem">手动体检</Button>
              <Button size="small"  @click="showConfirmPay(index)" type="success" ghost style="margin-left: 0.5rem">审核</Button>
            </i-col>
          </Row>
        </div>


      </ListItem>
      </CheckboxGroup>
      <div style="text-align: right;padding: 1rem 0">
        <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
              @on-page-size-change="sizeChange" :page-size-opts="[20,40,60,100]"
              show-sizer show-elevator/>
      </div>
    </List>

    <!--确认订单 -->
    <Modal v-model="tStatus.modalVerify.isShow" width="60%"
           draggable title="订单风险审核"  >

        <KeyValueView oneline title="款项" >
          <RadioGroup v-model="tStatus.modalVerify.money">
            <Radio label="已到账,无风险提示" style="padding: 0 0.3rem"></Radio>
            <Radio label="已到账,有风险提示" style="padding: 0 0.3rem"></Radio>
            <Radio label="未到账" style="padding: 0 0.3rem"></Radio>
          </RadioGroup>
        </KeyValueView>
      <br>

      <KeyValueView oneline title="信息重复" >
        <RadioGroup v-model="tStatus.modalVerify.repeat">
          <Radio label="无重复" style="padding: 0 0.3rem"></Radio>
          <Radio label="有重复,无风险" style="padding: 0 0.3rem"></Radio>
          <Radio label="有重复,有风险" style="padding: 0 0.3rem"></Radio>
        </RadioGroup>
      </KeyValueView>
      <br>
      <Input v-model.trim="tStatus.modalVerify.auditNote" maxlength="300" show-word-limit="true"  type="textarea" placeholder="审核备注"  />
      <div slot="footer" >
        <Button @click="cancel()" type="primary" ghost style="margin-left: 0.5rem">取消</Button>
        <Button @click="confirmOrders(0)" type="error"  style="margin-left: 0.5rem">拦截</Button>
        <Button @click="confirmOrders(1)" type="success"  style="margin-left: 0.5rem">通过</Button>
      </div>

    </Modal>
  </div>

</template>

<script>
import tiyData from "./js/paymentAndSafe/paymentAndSafe_data";
import {getShortNo, init, isFirstOrder,showDeviceType, webList} from "./js/orderList/newOrder_fun";
import {initCheckData,confirmOrderPay} from "./js/paymentAndSafe/paymentAndSafe_fun";
import {formatDate} from "../js/dateUtils";
import KeyValueView from "../widgets/KeyValueView";

export default {
  data(){
    return{
      tPage: tiyData.tPage,
      tData: tiyData.tData,
      tStatus: tiyData.tStatus,
      check: '',
      isCheckedAllMessage: false,
      messageSelected: [],
      tParams: tiyData.tParams,
      index:0,//选中的订单

      tRole:{//权限
        COMMON_1_100:"COMMON-1-100",
      },
    }
  },
  methods:{
    search(){
      tiyData.tPage.currentPage = 1;
      webList(this, tiyData,2);
    },
    checkChange(val) {
      if (this.messageSelected.length == this.tData.orderList.length) {
        this.isCheckedAllMessage = true;
      } else {
        this.isCheckedAllMessage = false;
      }
    },
    handleCheckAll() {
      let self = this;
      if (this.isCheckedAllMessage) {
        this.messageSelected.splice(0, this.messageSelected.length);
        for(let i=0;i<this.tData.orderList.length;i++){
          self.messageSelected.push(i);
        }
      } else {
        this.messageSelected.splice(0, this.messageSelected.length);
      }
    },
    makeCheckData(userId,orderId){
      initCheckData(this,tiyData,userId,orderId);
    },
    showConfirmPay(index){ //显示确认款项是否已到帐对话框
      tiyData.tStatus.modalVerify.money='';
      tiyData.tStatus.modalVerify.repeat='';
      tiyData.tStatus.modalVerify.auditNote='';

      this.index=index;
      tiyData.tStatus.modalVerify.isShow = true;
    },
    cancel(){ //取消
      tiyData.tStatus.modalVerify.isShow = false;
    },
    confirmOrders(isConfirm){//确认订单
      tiyData.tParams.isConfirmed=isConfirm;
      confirmOrderPay(this, tiyData,this.index);
    },
    showShortNo(serialNumber){
      return getShortNo(serialNumber);
    },
    changePage(page) {
      tiyData.tPage.currentPage = page;
      webList(this, tiyData,2);
      this.isCheckedAllMessage = false;
      this.handleCheckAll();
    },
    reloadList(){
      webList(this, tiyData,2);
    },
    sizeChange(page) {
      tiyData.tPage.stepNumber = page;
      webList(this, tiyData,2);
    },
    formatDate(date, format){
      return formatDate(date, format);
    },
    isFirstOrder(firstOrder){
      return isFirstOrder(firstOrder);
    },
    showDeviceType(deviceType){
      return showDeviceType(deviceType);
    },
  },
  computed: {
    fullName(){
      return tiyData.tData.checkData.fullName.split(',');
    },
    mobile(){
      return tiyData.tData.checkData.mobile.split(',');
    },
    email(){
      return tiyData.tData.checkData.email.split(',');
    },
    receiver(){
      return tiyData.tData.checkData.receiver.split(',');
    },
    addressPhone(){
      return tiyData.tData.checkData.addressPhone.split(',');
    },
    address(){
      return tiyData.tData.checkData.address.split(',');
    },
  },
  components: {
    KeyValueView,
  },
  mounted(){
    init(this,tiyData,2);
  },
}
</script>

<style scoped lang="less">
@import  (once,optional) "../css/base.less";


</style>
